<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table{
				margin: 20px auto;
				border: 1px solid gainsboro;
			}
			
			tr{
				background-color: gainsboro;
			}
			tr:hover{
				background-color: white;
			}
			tr td{
				width: 100px;
				/*height: 80px;*/
				text-align: center;
				line-height: 50px;
			}
			#tr1{
				background-color:cornflowerblue ;
				font-size: 18px;
				color: white;
			}
		</style>
	</head>
	<body>
		<table border="1px" cellpadding="0" cellspacing="0">
			<thead>
				<tr id="tr1">
					<td><input type="checkbox" id="total"/></td>
					<td>菜名</td>
					<td>饭店</td>
				</tr>
			</thead>
			<tbody id="selects">
			<tr >
				<td><input type="checkbox" /></td>
				<td>菜名</td>
				<td>饭店</td>
			</tr>
			<tr>
				<td><input type="checkbox" /></td>
				<td>菜名</td>
				<td>饭店</td>
			</tr>
			<tr>
				<td><input type="checkbox" /></td>
				<td>菜名</td>
				<td>饭店</td>
			</tr>
			<tr>
				<td><input type="checkbox" /></td>
				<td>菜名</td>
				<td>饭店</td>
			</tr>
			<tr>
				<td><input type="checkbox" /></td>
				<td>菜名</td>
				<td>饭店</td>
			</tr>
			</tbody>
		</table>
		<script>
			var total = document.getElementById("total");
			var selects = document.getElementById("selects");
			var inputs = document.getElementsByTagName("input");
			total.onclick = function(){
				for(var i=0;i<selects.length;i++){
					selects[i].checked = this.checked;
				}
			}
		</script>
	</body>
</html>
